<script setup lang="ts">
import { onMounted } from 'vue';
import { useMonitoringEquipmentStore } from '@/store/modules/earlyWarning/useMonitoringEquipmentStore';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import UserMonitoring from '@/components/userMonitoring/index.vue';

const { monitoringForceData, sceneNameList, userMonitoringRef, visible } = storeToRefs(useMonitoringEquipmentStore());
const { getPic, toggleEquipmentEntities, userMonitoringHandle, close, fetchMonitoringData } = useMonitoringEquipmentStore();

// 在组件挂载时初始化监控设备数据
onMounted(() => {
  fetchMonitoringData();
});

const isHeightLight = computed(() => {
  return (scene: string, title: string) => {
    return sceneNameList.value.includes(scene + title) ? '#00ffff' : 'white';
  };
});
</script>

<template>
  <div class="container-box">
    <div class="item-box" v-for="(item, index) in monitoringForceData" :key="item.id">
      <div class="blue-box">
        <div class="blue-box-item">
          <div class="top-box">
            <div class="left">
              <div>{{ item.total }}</div>
              <div>{{ item.name }}</div>
            </div>
            <img :src="getPic(index)" alt="" />
          </div>
          <div class="onlin-box">
            <div class="online-item">
              <span>{{ item.onlineName }}</span
              ><span>{{ item.onlineNum }}</span>
            </div>
            <div class="online-item">
              <span>{{ item.onlineRateName }}</span
              ><span>{{ item.onlineRate }}</span>
            </div>
          </div>
          <template v-if="index === 0">
            <div class="bottom-box">
              <div
                class="bottom-box-item"
                @click="toggleEquipmentEntities(item.adjacentUndergroundSpaceName, item.type, COMPONENT_TITLES.LEAK_MONITORING)"
              >
                <div :style="{ 'color': isHeightLight(item.adjacentUndergroundSpaceName, COMPONENT_TITLES.LEAK_MONITORING) }">
                  {{ item.adjacentUndergroundSpaceName }}
                </div>
                <div>
                  <span> {{ item.adjacentUndergroundSpaceNumZx || 0 }} </span>
                  <span>/</span>
                  <span> {{ item.adjacentUndergroundSpaceNum || 0 }} </span>
                </div>
              </div>
              <div class="bottom-box-item" @click="toggleEquipmentEntities(item.cateringVenuesName, item.type, COMPONENT_TITLES.LEAK_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.cateringVenuesName, COMPONENT_TITLES.LEAK_MONITORING) }">
                  {{ item.cateringVenuesName }}
                </div>
                <div>
                  <span> {{ item.cateringVenuesNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.cateringVenuesNum || 0 }} </span> -->
                </div>
              </div>
              <div
                class="bottom-box-item"
                @click="toggleEquipmentEntities(item.denselyPopulatedAreasName, item.type, COMPONENT_TITLES.LEAK_MONITORING)"
              >
                <div :style="{ 'color': isHeightLight(item.denselyPopulatedAreasName, COMPONENT_TITLES.LEAK_MONITORING) }">
                  {{ item.denselyPopulatedAreasName }}
                </div>
                <div>
                  <span> {{ item.denselyPopulatedAreasNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.denselyPopulatedAreasNum || 0 }} </span> -->
                </div>
              </div>
              <div class="bottom-box-item" @click="userMonitoringHandle()">
                <div :style="{ 'color': visible ? '#00ffff' : 'white' }">{{ item.householdMonitoringName }}</div>
                <div>
                  <span> {{ item.householdMonitoringNum || 0 }} </span>
                </div>
              </div>
              <!-- <div class="bottom-box-item" @click="toggleEquipmentEntities(item.otherName, item.type, COMPONENT_TITLES.LEAK_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.otherName, COMPONENT_TITLES.LEAK_MONITORING) }">
                  {{ item.otherName }}
                </div>
                <div>
                  <span> {{ item.otherNumZx || 0 }} </span>
                  <span>/</span>
                  <span> {{ item.otherNum || 0 }} </span>
                </div>
              </div> -->
            </div>
          </template>
          <template v-else-if="index === 1">
            <div class="bottom-box">
              <div
                class="bottom-box-item"
                @click="toggleEquipmentEntities(item.denselyPopulatedAreasName, item.type, COMPONENT_TITLES.PRESSURE_MONITORING)"
              >
                <div :style="{ 'color': isHeightLight(item.denselyPopulatedAreasName, COMPONENT_TITLES.PRESSURE_MONITORING) }">
                  {{ item.denselyPopulatedAreasName }}
                </div>
                <div>
                  <span> {{ item.denselyPopulatedAreasNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.denselyPopulatedAreasNum || 0 }} </span> -->
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="bottom-box">
              <div class="bottom-box-item" @click="toggleEquipmentEntities(item.siteName, item.type, COMPONENT_TITLES.FLOW_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.siteName, COMPONENT_TITLES.FLOW_MONITORING) }">
                  {{ item.siteName }}
                </div>
                <div>
                  <span> {{ item.siteNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.siteNum || 0 }} </span> -->
                </div>
              </div>
              <div class="bottom-box-item" @click="toggleEquipmentEntities(item.regulatorStationName, item.type, COMPONENT_TITLES.FLOW_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.regulatorStationName, COMPONENT_TITLES.FLOW_MONITORING) }">
                  {{ item.regulatorStationName }}
                </div>
                <div>
                  <span> {{ item.regulatorStationNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.regulatorStationNumZx || 0 }} </span> -->
                </div>
              </div>
              <div class="bottom-box-item" @click="toggleEquipmentEntities(item.reserveStationName, item.type, COMPONENT_TITLES.FLOW_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.reserveStationName, COMPONENT_TITLES.FLOW_MONITORING) }">
                  {{ item.reserveStationName }}
                </div>
                <div>
                  <span> {{ item.reserveStationNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.reserveStationNum || 0 }} </span> -->
                </div>
              </div>
              <div class="bottom-box-item" @click="toggleEquipmentEntities(item.industryCommerceName, item.type, COMPONENT_TITLES.FLOW_MONITORING)">
                <div :style="{ 'color': isHeightLight(item.industryCommerceName, COMPONENT_TITLES.FLOW_MONITORING) }">
                  {{ item.industryCommerceName }}
                </div>
                <div>
                  <span> {{ item.industryCommerceNumZx || 0 }} </span>
                  <!-- <span>/</span>
                  <span> {{ item.industryCommerceNum || 0 }} </span> -->
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <UserMonitoring @close="close" :model-value="visible" ref="userMonitoringRef" />
</template>

<style scoped lang="scss">
.container-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    height: 33.3%;

    .title {
      padding-left: 3%;
    }

    .blue-box {
      width: 100%;
      height: 100%;
      z-index: 99;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .blue-box-item {
        cursor: pointer;
        box-sizing: border-box;
        padding: 0.5rem 0.9375rem;
        width: 100%;
        background-image: url(@/assets/largescreen/blue-box.png);
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;

        .onlin-box {
          font-size: 0.75rem;
          color: #43ff8b;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 14px 0;

          .online-item {
            min-width: 45%;
            display: flex;
            align-items: flex-start;
            flex-direction: row;
            justify-content: space-between;

            :nth-child(2) {
              font-family: PangMenZhengDao;
            }
          }
        }

        .top-box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            :first-child {
              color: #00ffff;
              font-size: 1.75rem;
              font-family: PangMenZhengDao;
              font-weight: 400;
            }

            :last-child {
              font-size: 0.75rem;
              font-weight: 500;
            }
          }

          img {
            width: 5.1944rem;
            height: 3.5938rem;
          }
        }

        .bottom-box {
          .bottom-box-item {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            margin-top: 6px;

            :first-child {
              font-size: 15px;
              font-family: PingFang SC;
              font-weight: 500;
              cursor: pointer;
            }

            :last-child {
              display: flex;
              align-items: center;

              :nth-child(1) {
                font-size: 21px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: rgb(5, 226, 5);
              }

              :nth-child(2) {
                font-size: 16px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                margin: 0 10px;
              }

              :nth-child(3) {
                font-size: 21px;
                font-family: PangMenZhengDao;
                font-weight: 400;
                color: #00ffff;
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 3840px) {
  .container-box {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;

    .item-box {
      width: 32%;
      height: 100%;

      .blue-box-item {
        height: 100%;
      }
    }
  }
}
</style>
